<template>
  <el-popover
    ref="openLog"
    placement="bottom"
    title="用户头像"
    trigger="click">
    <div style="max-width:500px;max-height:380px;overflow:auto;display: flex; flex-direction: column">
      <div  style="width:100%;height:100%;overflow:auto;display: flex;"><img :src="newImg" style="width:100%;height:100%" @error="imgError()"></div>
      <div style="padding: 5px 0px;align-self: flex-end;" v-show="showEdit">
        <el-button type="success" size="mini" @click="selectHeadImg">更换头像</el-button>
        <el-button type="primary" size="mini" @click="changeUserHeadImg">保存</el-button>
      </div>
    </div>
    <img :src="oldImg" :style="{width: imgSize + 'px', height: imgSize + 'px', borderRadius: '50%', cursor: 'pointer'}" slot="reference" @error="imgError()">
  </el-popover>
</template>

<script>
  import localImg from '#/img/headimg.jpg'
  export default {
    name: 'headImg',
    props: ['imgUrl', 'showEdit', 'size'],
    data: function () {
      return {
        newImg: this.imgUrl,
        oldImg: this.imgUrl,
        imgSize: this.size || 60
      }
    },
    methods: {
      selectHeadImg () {
        const dialog = require('electron').remote.dialog
        dialog.showOpenDialog({
          filters: [
            {name: 'Images', extensions: ['jpg', 'jpeg', 'png', 'gif']}
          ]
        }, (files) => {
          if (files) {
            let img = files[0]
            this.newImg = img
          }
        })
      },
      changeUserHeadImg () {
        this.$emit('submit')
        this.oldImg = this.newImg
      },
      imgError () {
        this.newImg = localImg
        this.oldImg = localImg
      }
    },
    watch: {
      imgUrl: function () {
        this.newImg = this.imgUrl
        this.oldImg = this.imgUrl
      }
    }
  }
</script>

<style scoped>
  
</style>
